<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>利息计算</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container {
      width: 50%;
      margin: auto;
    }

    .line {
      display: flex;
      height: 3vh;
      margin: 10px 0;
    }

    .line div {
      width: 8%;

    }

    .line input {
      padding: 1px 2px;
    }

    .output {
      display: flex;
      justify-content: space-around;
    }

    .output section {
      width: 50%;
    }

    .output .list {
      height: 20vh;
      overflow-y: scroll;
      margin-top: 10px;
      margin-bottom: 8px;
      padding: 2px;
    }

    .output .list::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }

    .output>section>section {
      display: flex;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    @media screen and (max-width: 450px) {
      .container {
        width: 100%;
      }
      .line{
        height: auto;
      }
      .line div{
        width: 20%;
      }
      .output section{
        width: 70%;
      }
    }
  </style>
</head>

<body>
  <main class="container">
    <section class="input">
      <div class="line">
        <div>
          金额:
        </div>
        <input type="number" name="base" placeholder="请输入金额(元)" value="">
      </div>
      <div class="line">
        <div>
          年利率:
        </div>
        <input type="number" name="rateY" placeholder="请输入利率(%)" value="">
      </div>
      <div class="line">
        <div>
          月数:
        </div>
        <input type="number" placeholder="请输入月数" name="month">
      </div>
    </section>
    <section class="output" style="display: none;">
      <section class="left-xi">
        <h3>等额本息</h3>
        <section>
          <div>
            总计:
          </div>
          <div class="all"></div>
        </section>
        <section>
          <div>
            总利息:
          </div>
          <div class="alllixi"></div>
        </section>
        <section>
          <div>
            总利率:
          </div>
          <div class="alllilv"></div>
        </section>
        <div class="list"></div>
      </section>
      <section class="right-jin">
        <h3>等额本金</h3>
        <section>
          <div>
            总计:
          </div>
          <div class="all"></div>
        </section>
        <section>
          <div>
            总利息:
          </div>
          <div class="alllixi"></div>
        </section>
        <section>
          <div>
            总利率:
          </div>
          <div class="alllilv"></div>
        </section>
        <div class="list"></div>
      </section>
    </section>
    <h1>名词解释</h1>
    <section class="xi">
      <h2 class="name"></h2>
      <div class="desc">简介</div>
      <div class="other"></div>
    </section>
    <section class="jin">
      <h2 class="name"></h2>
      <div class="desc">简介</div>
      <div class="other"></div>
    </section>
    <section class="jin"></section>
  </main>
  <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
  <script>
    let base = 0; //贷款金额
    let baseM = 0; //每月基础本金
    let result = 0; //每月还款金额
    let month = 0; //总月数
    let year = 0; //总年数
    let rateY = 0; //年利率
    let interest = 0; //月利息

    let printTxtL = ''; //等额本息最终输出文字
    let finalBaseL = ''; //等额本息最终金额
    let finalInterestL = ''; //等额本息最终利息
    let finalRateL = 0; //等额本息最终利率

    let finalBaseR = 0; //等额本金最终金额
    let finalInterestR = ''; //等额本金最终利息
    let finalRateR = 0; //等额本金最终利率
    let printTxtR = ''; //等额本金最终输出文字
    let way1 = {
      name: '等额本息',
      desc: ' 指在还款期内，每月偿还同等数额的贷款(包括本金和利息)',
      demo: '',
      other: '<br />采用等额本息还款方式的话，每月还相同的数额，作为贷款人来说，操作是相对简单的，每月承担相同的款项也方便安排收支。当然，前期的时候等额本息的还款压力相较于等额本金来说是较小的'
    };
    let way2 = {
      name: '等额本金',
      desc: '指在还款期内，每月偿还同等数额的贷款(包括本金和利息)',
      demo: '',
      other: '<br />1.等额本金法因为在前期的还款额度较大，而后逐月递减，所以比较适合在前段时间还款能力强的贷款人;<br />2.等额本金法的缺点是前期还款压力较大，尤其是在金额比较大的时候。但是由于逐月递减，后期越还越轻松。若有额外收入提前还款，或使用每年的公积金冲抵贷款本金，则可以更快的还清贷款。'
    }
    if (month) {
      year = month / 12
    } else {
      month = year * 12
    }

    function formatNum(f, digit = 2) {
      f = f.toFixed(2)
      if (f.split(".")[1].length > 2) {
        let m = Math.pow(10, digit);
        return parseInt(f * m, 10) / m;
      } else {
        return f
      }

    }

    function Calculation(base, rateY, month, rateM = 0) {
      printTxtL = ''
      printTxtR = ''
      finalBaseR = 0
      base = parseFloat(base)
      rateY = parseFloat(rateY)
      month = parseFloat(month)
      rateM = rateY / 12; //月利率

      if (!base) return
      if (!rateY) return
      if (!month) return

      $(".output").show();

      let numerator = rateM * Math.pow((1 + rateM), month); //分子
      let denominator = Math.pow((1 + rateM), month) - 1; //分母
      result = base * numerator / denominator; //每期还款额度(含本金)
      finalBaseL = formatNum(result * month);
      finalInterestL = formatNum(finalBaseL - base);
      finalRateL = formatNum((finalInterestL / base).toFixed(4) * 100);
      for (let i = 0; i < month; i++) {
        printTxtL += `${i+1}/${month}期 : ${formatNum(result)}元\n<br />`
      }

      baseM = base / month;
      for (let i = 0; i < month; i++) {
        finalBaseR += (baseM + (base - baseM * i) * rateM)
        printTxtR += `${i+1}/${month}期 : ${formatNum(baseM+(base-baseM*i)*rateM)}元\n<br />`
      }
      finalInterestR = formatNum(finalBaseR - base);
      finalRateR = formatNum((finalInterestR / base) * 100);
      $(".left-xi .list").html(printTxtL)
      $(".left-xi .all").html(finalBaseL + '元')
      $(".left-xi .alllixi").html(finalInterestL + '元')
      $(".left-xi .alllilv").html(finalRateL + '%')

      $(".right-jin .list").html(printTxtR)
      $(".right-jin .all").html(formatNum(finalBaseR) + '元')
      $(".right-jin .alllixi").html(finalInterestR + '元')
      $(".right-jin .alllilv").html(finalRateR + '%')
    }

    $(() => {
      let Xi = $(".xi");
      let Jin = $(".jin")
      Xi.find(".name").html(way1.name);
      Xi.find(".desc").html(way1.desc);
      Xi.find(".other").html('特点:' + way1.other)

      Jin.find(".name").html(way2.name);
      Jin.find(".desc").html(way2.desc);
      Jin.find(".other").html('特点:' + way2.other)


      // 金额
      $("input[name='base']").on("input", function (e) {
        base = $(this).val();
        useCalculation();
      });
      // 利率
      $("input[name='rateY']").on("input", function (e) {
        rateY = $(this).val() / 100;
        useCalculation();;

      });
      // 月数
      $("input[name='month']").on("input", function (e) {
        month = $(this).val();
        if (month <= 1200) {
          month = parseInt(month);
          $("input[name='month']").val(month);
          useCalculation();
        } else {
          alert("月份应小于1200(100年)");
          $("input[name='month']").val(1);
        }
      });

      function useCalculation() {
        Calculation(base, rateY, month);
      }

    })
  </script>
</body>

</html>